<template>
  <div
    ref="lineChart"
    class="line-chart"
    :style="{ width: '100%', height: '100%' }"
  ></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "LineChart",
  props: {
    // 传入折线图的数据
    option: {
      type: Object,
      default: () => {},
    },
  },
  mounted() {
    this.$nextTick((res) => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.lineChart;
      const myChart = echarts.init(chartDom);

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(this.option);

      // 自适应大小
      window.addEventListener("resize", () => myChart.resize());
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
  },
};
</script>

<style scoped>
.line-chart {
  height: 100%;
  width: 100%;
}
</style>
